<template>
	<view>
		<view class="main" v-if="isShow">
			<view class="card">
				<view class="title" v-if="storeIds.length <= 0">默认设置</view>
				<view class="title" v-else-if="storeIds.length == 1">场地: {{store.storeName}}</view>
				<view class="title" v-else-if="storeIds.length > 1">
          <text>你正在对</text>
          <text class="count">{{storeIds.length}}</text>
          <text>个场地进行客服电话的设置</text>
        </view>
				<view class="wechat-name">
					<view>
						<u-radio-group v-model="radioGroup" @change="radioGroupChange" class="radio-group" size="20" placement="row">
							<u-radio activeColor="#6072FF" label="手机号码" name="serviceMobilePhone"/>
							<u-radio activeColor="#6072FF" label="固定电话" name="serviceFixedTelephone" class="serviceFixedTelephone"/>
						</u-radio-group>
					</view>
					<view v-if="radioGroup == 'serviceMobilePhone'" class="service-fixed-telephone">
						<u-input v-model="form.serviceMobilePhone" type="text" maxlength="11" :border="false"
							class="service-mobile-phone-input" :custom-style="{'padding':'10rpx 20rpx'}"
							:clearable="true" placeholder="请输入手机号码" fontSize="28rpx" />
					</view>
					<view v-if="radioGroup == 'serviceFixedTelephone'" class="service-fixed-telephone">
						<u-input v-model="form.areaCode" type="text" maxlength="4" :border="false"
							class="area-code-input" :custom-style="{'padding':'10rpx 20rpx'}" :clearable="true"
							placeholder="区号"  fontSize="28rpx"/>
						<view class="line">-</view>
						<u-input v-model="form.serviceFixedTelephone" type="text" maxlength="8" :border="false"
							class="service-fixed-telephone-input" :custom-style="{'padding':'10rpx 20rpx'}"
							:clearable="true" placeholder="请输入固话" fontSize="28rpx" />
					</view>
				</view>
				<view class="btn">
					<view class="u-m-r-26"><text
							v-if="customerServiceInfo.serviceMobilePhone != null || customerServiceInfo.serviceFixedTelephone != null"
							@click="clear">清除设置</text></view>
					<view>
						<u-button type="primary" size="small" class="save" @click="submit">保存</u-button>
					</view>
				</view>
			</view>
		</view>
		<empty :emptyTitle="'暂无信息,请重新访问'" v-else></empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				storeIds: [],
				customerServiceInfo: {
					id: 0,
					serviceMobilePhone: '',
					serviceFixedTelephone: '',
				},
				form: {
					serviceFixedTelephone: '',
					areaCode: '',
				},
				store: {},
				radioGroup: 'serviceMobilePhone',
				batch: false
			}
		},
		onLoad(param) {
			if (param.batch != null) {
				this.batch = param.batch;
			}
			if (param.storeIds != null) {
				if (JSON.parse(param.storeIds).length > 1) {
					this.storeIds = JSON.parse(param.storeIds);
					this.isShow = true;
				} else if (JSON.parse(param.storeIds).length == 1) {
					this.storeIds = JSON.parse(param.storeIds);
					this.findStore(this.storeIds[0]);
				}
			} else {
				if (param.brandInfoId > 0) {
					this.brandInfoId = param.brandInfoId;
					this.findDefault();
				}
			}
		},
		methods: {
			findStore(id) {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				this.$api('merchantStore.findMerchantStoreByUserIdByStoreId', {
					id: id
				}).then(res => {
					this.store = res.data;
					if (this.store != null) {
						this.findByMerchantStoreId(id);
					} else {
						uni.hideLoading();
						getApp().err("访问失败!请重新访问!");
						return;
					}
				})
			},
			findByMerchantStoreId(merchantStoreId) {
				this.$api('customerServiceInfo.findByMerchantStoreId', {
					merchantStoreId: merchantStoreId
				}).then(res => {
					uni.hideLoading();
					this.isShow = true;
					if (res.data != null) {
						this.customerServiceInfo['id'] = res.data.id;
						this.customerServiceInfo['serviceMobilePhone'] = res.data.serviceMobilePhone;
						this.customerServiceInfo['serviceFixedTelephone'] = res.data.serviceFixedTelephone;
						this.form = {
							serviceMobilePhone: res.data.serviceMobilePhone
						};
						this.callBack(res);
					}
				})
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			submit() {
				console.log(this.customerServiceInfo);
				if (this.radioGroup == 'serviceMobilePhone') {
					if (this.form.serviceMobilePhone == null || this.form.serviceMobilePhone == '') {
						getApp().err('请输入手机号码');
						return;
					}
					if (!this.$u.test.mobile(this.form.serviceMobilePhone)) {
						getApp().err('请输入正确的手机号');
						return;
					}
					this.customerServiceInfo.serviceMobilePhone = this.form.serviceMobilePhone;
					this.customerServiceInfo.serviceFixedTelephone = null;
				} else if (this.radioGroup == 'serviceFixedTelephone') {
					if (this.form.areaCode == null || this.form.areaCode == '') {
						getApp().err('请输入区号');
						return;
					}
					if (this.form.serviceFixedTelephone == null || this.form.serviceFixedTelephone == '') {
						getApp().err('请输入固定电话');
						return;
					}
					if (/^\d{3,4}$/.test(this.form.areaCode) === false) {
						getApp().err('请输入正确的区号');
						return;
					}
					if (/^\d{7,8}$/.test(this.form.serviceFixedTelephone) === false) {
						getApp().err('请输入正确的固定电话');
						return;
					}
					this.customerServiceInfo.serviceFixedTelephone = this.form.areaCode + '-' + this.form
						.serviceFixedTelephone;
					this.customerServiceInfo.serviceMobilePhone = null;
				}
				if (this.storeIds.length > 0) {
					this.customerServiceInfo['storeIds'] = this.storeIds;
				}
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				this.$api('customerServiceInfo.editPhone', this.customerServiceInfo).then(res => {
					uni.hideLoading();
					if (res.status == 1) {
						getApp().err(res.msg);
					} else {
						uni.showToast({
							title: "保存成功",
							mask: true
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: this.batch ? 2 : 1
							});
							uni.$emit('edit', "true")
							// uni.redirectTo({
							// 	url:'../brand-info-phone'
							// })
						}, 1000)
					}
				}).catch(() => {
					uni.hideLoading();
					getApp().err("异常信息!请重新访问!");
				});
			},
			findDefault() {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				this.$api('brandInfo.findByUserId').then(res => {
					uni.hideLoading();
					if (res.data == null) {
						getApp().err("访问失败!请重新访问!");
						return;
					}
					this.isShow = true;
					this.customerServiceInfo['brandInfoId'] = res.data.id;
					this.customerServiceInfo['serviceMobilePhone'] = res.data.serviceMobilePhone;
					this.customerServiceInfo['serviceFixedTelephone'] = res.data.serviceFixedTelephone;
					this.form = {
						serviceMobilePhone: res.data.serviceMobilePhone
					};
					this.callBack(res);
				})
			},
			callBack(res) {
				if (res.data.serviceFixedTelephone != null) {
					this.form.serviceFixedTelephone =
						res.data.serviceFixedTelephone.substring(res.data.serviceFixedTelephone.indexOf('-') + 1);
					this.form.areaCode = res.data.serviceFixedTelephone.substring(0, res.data.serviceFixedTelephone
						.indexOf('-'));
					this.radioGroup = 'serviceFixedTelephone';
				}
			},
			clear() {
				if (this.storeIds.length > 1) {
          getApp().err("清除失败，请重新访问此页面");
					return;
				}
				let this2 = this;
				uni.showModal({
					title: '提示',
					content: '确定要清除已保存的客服电话吗?',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍等...',
								mask: true
							})
							this2.customerServiceInfo.serviceMobilePhone = null;
							this2.customerServiceInfo.serviceFixedTelephone = null;
							if (this2.storeIds.length > 0) {
								this2.customerServiceInfo['storeIds'] = this2.storeIds;
								this2.customerServiceInfo.merchantStoreId = this2.storeIds[0];
							}

							this2.$api('customerServiceInfo.clearPhone', this2.customerServiceInfo).then(
								res => {
									uni.hideLoading();
									if (res.data > 0) {
                    this2.$helpers.toast("清除成功", 'success', 3000, true, () => {
                      uni.navigateBack({
                        delta: this2.batch ? 2 : 1
                      });
                      uni.$emit('edit', "true")
                    });
									} else {
										getApp().err("清除失败，请重新访问此页面");
									}
								})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
	.u-radio{
		margin-right: 100rpx !important;
	}
	.main {
		padding: $u-padding-medium;
		color: rgba(0, 0, 0, 0.75);
		font-size: $f-base;
		.card {
			padding: $u-padding-medium;
			background-color: white;
			border-radius: $uni-border-radius-lg;
			.title {
				padding: $u-padding-mini 0;
				color: $u-tips-color;

				.count {
          color: $u-primary;
          margin: 0 20rpx;
				}
			}

			.wechat-name {
				margin-top: $u-margin-medium;
				font-size: $f-base;
				font-weight: 450;

				.radio-group {
					margin: $u-margin-medium 0;
					
				}

				.service-fixed-telephone {
					display: flex;
					align-items: center;
					background-color: $u-bg-color;
					margin: 20rpx 0;
					.area-code-input {
						flex: 3;
						
						border-radius: $uni-border-radius-lg + 3;
						margin-top: 20rpx;
						font-weight: normal;
					}

					.line {
						margin: 0 20rpx;
					}

					.service-fixed-telephone-input {
						flex: 6;
						border-radius: $uni-border-radius-lg + 3;
						margin-top: 20rpx;
						font-weight: normal;
					}

				}

				.service-mobile-phone-input {
					border-radius: $uni-border-radius-lg + 3;
					margin-top: 20rpx;
					font-weight: normal;
				}
			}

			.btn {
				color: $u-primary;
				margin-top: $u-margin-large;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: $f-base;
				
			}
		}
	}
</style>
